<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link href='http://fonts.googleapis.com/css?family=roboto|Libre+Baskerville' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/mobiles.css" />
</head>
<body>
<div id="invisible"></div>
<div id="settingsSection">
	<ul>
		<li id="menuProf">Profile</li>
		<li id="menuStopSync">Stop Sync</li>
		<li id="menuLogout">Logout</li>
	</ul>
</div>
<div id = "head">
	<span id="headTitle"><img src="images/head.png" alt="Title"></span>
	<span id="headSetting"><img src="images/settings.png" alt="Settings"></span>
</div>
<div id="cont">
<div id="content">
	<div class="valRow">
		<div class="valCol" id="profile">
		<table  style="width:100%">
		<tr>
			<td colspan="2"  style="text-align: center"><span class="profName">-- -- --</span></td>
		</tr>
		<tr class = "diff">
			<td class="desc"  style="text-align: center">Last synced at</td><td id="lastSync">11:10:12 , 02/12/2013</td>
		</tr>
	</table>
		</div>
		<div class="valCol" id="rrDiv">
		<table class="valTable">
		<tr>
				<td class="vitalsDesc">
					<span class="headText">Respiration Rate</span>
					Number of breaths per minute</td>
				<td class="vitals"><span class="value" id="rr">--</span>&nbsp;&nbsp;&nbsp;</td>
		<tr>
		</table>
		</div>
		<div class="valCol" id="hrDiv">
		<table class="valTable">
		<tr>
				<td class="vitalsDesc">
					<span class="headText">Heart Rate</span>
					Number of times heart beats per minute</td>
				<td class="vitals"><span class="value" id="hr">--</span>&nbsp;&nbsp;&nbsp;</td>
		<tr>
		</table>
		</div>
		<div class="valCol" id="stDiv">
		<table class="valTable">
		<tr>
				<td class="vitalsDesc">
					<span class="headText">Temperature</span>
					Temperature of the body</td>
				<td class="vitals"><span class="value" id="st">--</span>&deg;C</td>
		<tr>
		</table>
		</div>
		<div class="valCol" id="poDiv">
		<table class="valTable">
		<tr>
				<td class="vitalsDesc">
					<span class="headText">Posture</span>
					Angle at which the body is inclined</td>
				<td class="vitals"><span class="value" id="po">--</span>&deg;</td>
		<tr>
		</table>
		</div>
		<div class="valCol" id="paDiv">
		<table class="valTable">
		<tr>
				<td class="vitalsDesc">
					<span class="headText">Peak Acceleration</span>
					Acceleration exerted on the body</td>
				<td class="vitals"><span class="value" id="pa">--</span>m/s<sup>2</sup></td>
		<tr>
		</table>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
var timer = setInterval(refreshContent,1500);
function refreshContent(){
	 var details = Android.refreshVitalContents();
	 var vals = new Array();
	 vals = details.split(",");
	 if($('#menuStopSync').html() == "Start Sync")
		 vals[0] = vals[1] = vals[2] = vals[3] = vals[4] = "null";
	 if(vals[0] != "null"){
	 	$('#rr').html(vals[0]);
	 	$('#rrDiv').css("background","#"+getColor("rr",vals[0]));
	}
	 else{
		 $('#rr').html("--");
		 $('#rrDiv').css("background","#f7fcf6");
	 }
	 if(vals[1] != "null"){
	 	$('#hr').html(vals[1]);
	 	$('#hrDiv').css("background","#"+getColor("hr",vals[1]));
	 }
	 else{
		 $('#hr').html("--");
		 $('#hrDiv').css("background","#f7fcf6");
	 }
	 if(vals[2] != "null"){
		 vals[2] = (vals[2]-32)*(5/9);
		 vals[2] = (vals[2]*9/5) + 32;
		 vals[2] = vals[2].toFixed(1);
		 if(vals[2] != "NaN")
	 	$('#st').html(vals[2]);
	 	$('#stDiv').css("background","#"+getColor("st",vals[0]));
	 }
	 else{
		 $('#st').html("--");
		 $('#stDiv').css("background","#f7fcf6");
	 }
	 if(vals[3] != "null"){
		 $('#po').html(vals[3]);
	 }
	 else{
		 $('#po').html("--");
	 }
	 if(vals[4] != "null"){
		 $('#pa').html(vals[4]);
	 }
	 else{
		 $('#pa').html("--");
	 }
	 var lSync = Android.getLastSync();
	 var sDate = lSync.substring(0,10);
	 var sTime = lSync.substring(11,19);
	 lSync = sTime+", "+sDate;
	 if(lSync != "null")
	 	$('#lastSync').html(lSync);
}

function getColor(par,val){
	var colors = new Array("f7fcf6","d6ebd4","f9c282","f7a07e");
	var range = 0;
	if(par == "rr"){
		switch(val){
		case (val>=12 && val<=20): range = 0; break;
		case (val>=9 && val<=11): range = 1; break;
		case (val>=21 && val<=24): range = 2; break;
		case (val<=8 || val>=25): range = 3; break;
		default: range = 0;
		}
	}
	else if(par == "hr"){
		switch(val){
		case (val>=51 && val<=90): range = 0; break;
		case ((val>=41 && val<=50)||(val>=91 && val<=110)): range = 1; break;
		case (val>=111 && val<=130): range = 2; break;
		case (val<=8 || val>=25): range = 3; break;
		default: range = 0;
		}
	}
	else if(par == "st"){
		switch(val){
		case (val>=36.1 && val<=38): range = 0; break;
		case ((val>=35.1 && val<=36)||(val>=38.1 && val<=39)): range = 1; break;
		case (val>=39.1): range = 2; break;
		case (val<=35): range = 3; break;
		default: range = 0;
		}
	}
	return colors[range];
}
</script>
</body>
</html>